import React from "react";

// 函数组件 子组件
// props的解构赋值1
// function SonA ({ list, obj, fun, JSX }) {
function SonA (props) {
  console.log(props);
  // props的解构赋值2
  const { list, obj, fun, JSX } = props
  return (
    <div>
      我是函数组件子组件, 父组件传递的值: 
      <br />
      { props.list }
      <br />
      { props.obj.name }
      <br />
      <button onClick={ props.fun }>触发父组件传递的方法</button>
      <br />
      { props.JSX }
      <div>
        解构赋值:
        <br />
        { list }
        <br />
        { obj.age }
        <br />
        { JSX }
      </div>
    </div>
  )
}

// 类组件 子组件
class SonB extends React.Component {
  render() {
    // 在类组件中, this.props 里面存储着父组件传递过来的属性
    return (
      <div>
        我是类组件子组件, 父组件传递的值: { this.props.msg }
      </div>
    )
  }
}

// props 说明
// 1. 是只读对象, 单项数据流, 不能直接进行修改
// 2. 可以传递任何数据. 数字,字符串,数组,对象,函数, JSX


// 父组件
class Father extends React.Component {
  state = {
    list: [1, 2, 3],
    obj: {
      name: '啦啦啦',
      age: 18
    },
    message: 'this is a message'
  }
  getFunc = () => {
    console.log('传递一个函数');
  }

  render() {
    return (
      <>
        <div>子组件A:</div>
        <SonA list={ this.state.list } obj={ this.state.obj } fun={ this.getFunc } JSX={ <div>传递一个JSX</div>}></SonA>
        <br />
        <div>子组件B:</div>
        <SonB msg={ this.state.message }></SonB>
      </>
    )
  }
}

function App() {
  return (
    <div className="App">
      <Father></Father>
    </div>
  );
}

export default App;



// import React from "react";

// function SonA (props) {
//   return (
//     <div>
//       父组件传递的参数(SonA)：{ props.JSX }--{ props.obj.a }--<button onClick={ props.func }>funcA</button>
//     </div>
//   )
// }

// class SonB extends React.Component {
//   render() {
//     return (
//       <div>
//         父组件传递的参数(SonB)：{ this.props.JSX }--{ this.props.obj.a }--<button onClick={ this.props.func }>funcB</button>
//       </div>
//     )
//   }
// }

// function App () {
//   function func() {
//     console.log('this is a function');
//   }
//   return (
//     <>
//       <SonA JSX={ <span>this is JSX1</span> } obj={ { a: 1, b: 2 } } func={ func }></SonA>
//       <SonB JSX={ <span>this is JSX2</span> } obj={ { a: 1, b: 2 } } func={ func }></SonB>
//     </>
//   )
// }

// export default App;
